<script lang="js" setup name="XSubMenuSlot">
import { ref, computed, onMounted, reactive } from "vue";

const props = defineProps({
	menu: {
		type: Object,
		required: true
	},
	index: {
		type: Number,
		required: true
	}
});

const ItemH = 32;
const showMenu = ref(false);
const subMenuPos = reactive({
	left: 0,
	top: 0
});

const fontSize = ref(14);
const subMenuWidth = computed(() => {
	let w = 80;
    props.menu.subMenu.forEach((item) => {
        const menuW = getMenuWidth(item, fontSize.value);
        w = menuW > w ? menuW : w;
    });

    const maxW = document.body.clientWidth / 2;

    // menu sidebar-icon width: 40px
    w += 40;
    const ret = w > maxW ? maxW : w;

	console.log('menuWidth', ret);

    return ret;
});

const subMenuHeight = computed(() => {
	const height = ItemH * props.menu.subMenu.length;
	return height;
});


const getMenuWidth = (menu, fontSize) => {
    const el = document.createElement("span");
    // el.innerText = menu.text;
    const text = menu.text;
    el.innerText = text;
    el.style.fontSize = fontSize + "px";
    el.style.position = "absolute";
    document.body.appendChild(el);
    let w = el.offsetWidth + 50;

    if (menu.image) {
        // console.log("has image:", this.$i18n.locale);
        w += 100;
    }
    document.body.removeChild(el);
    return w;
}

const subitemStyle = computed(() => {
	if (props.menu.separate) {
		const border = {};
		switch (props.menu.separate) {
			case "top":
				border.borderTop = "1px solid #aaa";
				break;
			case "bottom":
				border.borderBottom = "1px solid #aaa";
				break;
			case "both":
				border.borderTop = "1px solid #aaa";
				border.borderBottom = "1px solid #aaa";
				break;
		}
		return border;
	}
});

const subMenuStyle = computed(() => {
	return {
		left: subMenuPos.left + "px",
		top: subMenuPos.top + "px",
		width: subMenuWidth.value + "px"
	}
});

const show = (e) => {
	showMenu.value = true;
	const el = e.currentTarget;
	// subMenuPos.left = el.offsetLeft + el.clientWidth;
	// subMenuPos.top = 0;

	calcSubMenuPos(el);
}

const calcSubMenuPos = (el) => {
	// const xStart = el.offsetLeft + el.offsetWidth;
	// const xEnd = xStart + subMenuWidth.value;
	const maxWidth = document.body.clientWidth;
	const maxHeight = document.body.clientHeight;

    const rect = el.getBoundingClientRect();

	const xEnd = rect.right + subMenuWidth.value;
	const yEnd = rect.y + props.index*ItemH + subMenuHeight.value;

	// console.log('calcSubMenuPos', rect, "xEnd:", xEnd, "yEnd:", yEnd, "maxWidth:", maxWidth, "maxHeight:", maxHeight);

	if (xEnd > maxWidth) {
		subMenuPos.left = 0 - subMenuWidth.value;
	} else {
		subMenuPos.left = rect.width;
	}

	if (yEnd > maxHeight) {
		subMenuPos.top = ItemH - subMenuHeight.value;
	} else {
		subMenuPos.top = 0;
	}

}

const hide = (e) => {
	showMenu.value = false;
}

const transBeforeEnter = (el) => {
    // console.log('handleBeforeEnter', el);
	el.style.height = "0px";
    el.style.overflow = "hidden";
}
const transEnter = (el) => {
    // console.log('handleEnter', el);

	el.style.height = "auto";
	const h = el.offsetHeight;
	el.style.height = "0px";
	requestAnimationFrame(() => {
		el.style.height = h + "px";
		el.style.transition = ".4s";
	});
}

const transAfterEnter = (el) => {
	el.style.transition = "initial";
     el.style.overflow = null;
}

const transBeforeLeave = (el) => {
    // console.log('handleBeforeLeave', el);
	// el.style.height = el.clientHeight + "px";
    el.style.overflow = "hidden";
	el.style.transition = ".2s";
}
const transLeave = (el) => {
    // console.log('handleLeave', el);
	el.style.height = "0px";
}
const transAfterLeave = (el) => {
    // console.log('handleAfterLeave', el);
	// el.style.display = "none";
}
</script>

<template>
	<div class="container" @mouseenter="show" @mouseleave="hide">
		<li class="subitem" :style="subitemStyle">
			<span class="subitem-bar"></span>
			<span class="subitem-text">
				<slot name="title"></slot>
			</span>
			<div class="subitem-right">
				<span class="subitem-right-icon"></span>
			</div>
		</li>
		<Transition
			@beforeEnter="transBeforeEnter"
			@enter="transEnter"
			@afterEnter="transAfterEnter"
			@before-leave="transBeforeLeave"
			@leave="transLeave"
		>
			<div class="submenu" v-show="showMenu" :style="subMenuStyle">
				<slot></slot>
			</div>
		</Transition>
	</div>
</template>

<style lang="scss" scoped>
.container {
	position: relative;
}
.submenu {
	position: absolute;
	border: 1px solid #aaa;
}

.subitem {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 32px;
	background-color: #fdfdfd;
	background-color: var(--color-menu-bg);
	z-index: 20;
	overflow: hidden;
}

.subitem-bar {
	// display: inline-block;
	width: 38px;
	height: 100%;
	/* background-color: #D2D8DA; */
	background-color: var(--color-menu-bar);
	fill: var(--color-theme-text);
}

.subitem-text {
	// display: inline-block;
	flex: 1;
	height: 32px;
	line-height: 32px;
	font-size: 16px;
	padding-left: 10px;
	cursor: default;
	user-select: none;
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE 10 and IE 11 */
}

.subitem-right {
	// display: inline-block;
	width: 30px;
	height: 100%;
	padding-right: 6px;
}

.subitem-right-icon {
	float: right;
	width: 16px;
	height: 32px;
	// src\assets\images\arrow_right.png
	background: url(../../assets/images/arrow_right.png) no-repeat center center;
	background-size: 16px auto;
}

.subitem:hover {
	background-color: lightblue;
	color: blue;
	border: 1px solid lightskyblue;
}
</style>
